<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div>bind指令针对style进行了增强：</div>
	
	<div id="app1">
		<p>1、支持传入JSON对象(不建议使用，不够直观)：</p>
		<div v-bind:style="{color : redColor, 'font-size' : fontSize + 'px'}">注意查看该DIV的style</div>
	</div>
	
	<div id="app2">
		<p>2、支持传入对象：</p>
		<div v-bind:style="dStyle">注意查看该DIV的style</div>
	</div>
	
	<div id="app3">
		<p>3、支持传入数组：</p>
		<div v-bind:style="[dStyle1, dStyle2]">注意查看该DIV的style</div>
	</div>
	
	<div id="app4">
		<p>4、支持属性自动添加前缀：</p>
		<div v-bind:style="dStyle">注意查看该DIV的style</div>
	</div>
	
	<div id="app5">
		<p>5、可以使用数组来指定多重值，主要应用在需要前缀的值：</p>
		<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">测试看看</div>
		<div v-bind:style="dStyle">注意查看该DIV的style</div>
	</div>
</body>
<script type="text/javascript">
//app1
var app1 = new Vue({
	el: '#app1',
	data: {
		redColor: "red",
		fontSize: 30,
	}
});

//app2
var app2 = new Vue({
	el: '#app2',
	data: {
		dStyle: {
			color: "red",
			"font-size": "30px" //键名也可以使用fontSize
		}
	}
});

//app3
var app3 = new Vue({
	el: '#app3',
	data: {
		dStyle1: {
			color: "red",
			"font-size": "30px" //键名也可以使用fontSize
		},
		dStyle2: {
		    background: "#3385ff",
		    height: "60px"
		}
	}
});

//app4
var app4 = new Vue({
	el: '#app4',
	data: {
		dStyle: {
			color: "red",
			"font-size": "30px",
			transform: "scale(0.5)",  //这里transform属性会根据需要自动添加浏览器前缀
			"font-smoothing": "initial" //这里font-smoothing属性会根据需要自动添加浏览器前缀
		}
	}
});

//app5
var app5 = new Vue({
	el: '#app5',
	data: {
		dStyle: {
			color: "red",
			"font-size": "30px",
			"display": ['-webkit-box', '-ms-flexbox', 'flex']  //指定多重值
		}
	}
});
</script>
</html>
